<template>
  <div>
    <Reload></Reload>
    <section id="keepHealthHour" class="mt-5">
      <div class="row align-items-center">
        <div class="col-lg-6 mb-4 mb-lg-0 mt-5">
          <!-- Title -->
          <div class="section-title pl-4">
            <h3 class="sub-title base-color mb-2">中 国 传 统 十 二 时 辰</h3>
            <!-- <h2 class="title text-dark">当 前 时 间:</h2> -->
            <h2 class="title text-dark">{{ time }}</h2>
            <h2 class="title text-dark">{{ twelveClock }}</h2>
          </div>

          <!-- Text -->
          <!-- <p class="text-muted my-3">
              谷雨是二十四节气的第6个节气，通常在每年的4月20日或21日。“谷雨”就是雨水生五谷的意思，由于雨水滋润大地五谷得以生长，所以，谷雨就是“雨生百谷”。谚云“谷雨前后，种瓜种豆”。
            </p> -->

          <!-- List -->
          <ul class="content-list my-3 px-4">
            <li>
              <Folding :title="'shiChenJianJie'" :isSelect="true">
                <span slot="title">时辰简介</span>
                <div slot="content">
                  <p>{{ timeDate[0].content }}</p>
                  <p>{{ timeDate[1].content }}</p>
                  <p>{{ timeDate[2].content }}</p>
                  <span>{{ timeDate[3].content }}</span>
                  <Folding :title="timeDate[5][0].content" :isSelect="false">
                    <span slot="title">{{ timeDate[5][0].content }}</span>
                    <div slot="content">
                      <span
                        v-for="(p, index) in timeDate[5].slice(1)"
                        :key="index + 'timeDate[5]'"
                        >{{ p.content }}</span
                      >
                    </div>
                  </Folding>
                </div>
              </Folding>
            </li>
          </ul>
        </div>

        <div class="col-lg-6">
          <div class="position-relative">
            <TwelveClock @changeHour="resetHour"></TwelveClock>
          </div>
        </div>
      </div>
    </section>

    <section>
      <KeepHealthNav :nowPage="2"></KeepHealthNav>
    </section>
    <!-- ABOUT
            ============================================= -->
    <section id="about" class="about video py-3">
      <div class="container">
        <div class="about-bg-graphics">
          <img src="../../assets/img/about-bg.png" alt="/" />
        </div>

        <div class="row align-items-center">
          <div class="col-lg-12 px-5">
            <Folding :title="'shiChenJianYi'" :isSelect="true">
              <span slot="title">时辰建议</span>
              <div slot="content">
                <Folding
                  v-for="(p, index) in timeDate.slice(6)"
                  :key="index + '时辰建议'"
                  :title="p[0].content"
                  :isSelect="false"
                >
                  <span slot="title">{{ p[0].content }}</span>
                  <div slot="content">
                    <span
                      v-for="(q, index) in p.slice(1)"
                      :key="index + p[0].content"
                      >{{ q.content }}</span
                    >
                  </div>
                </Folding>
              </div>
            </Folding>
          </div>
        </div>
        <!-- End row -->
      </div>
      <!-- End container -->
    </section>
    <!-- END ABOUT -->
  </div>
</template>

<script>
import $ from "jquery";
import axios from "axios";

import Folding from "../../components/Folding.vue";
import TwelveClock from "../../components/TwelveClock.vue";
import KeepHealthNav from "../../components/KeepHealthNav.vue";
import Reload from "../../components/Reload";

export default {
  data() {
    return {
      tzArr: [
        "子",
        "丑",
        "寅",
        "卯",
        "辰",
        "巳",
        "午",
        "未",
        "申",
        "酉",
        "戌",
        "亥",
      ],
      sdArr: [
        "夜半",
        "鸡鸣",
        "平旦",
        "日出",
        "食时",
        "隅中",
        "日平",
        "日昳",
        "晡时",
        "日入",
        "黄昏",
        "人定",
      ],
      skArr: ["一", "二", "三", "四", "五", "六", "七", "八"],
      interval: null, //计时器
      time: "", //当前时间
      twelveClock: "", //十二时辰

      timeDate: [
        { lable: "jieshao", content: "时辰：未时" },
        { lable: "jieshao", content: "时间：13：00～15：00" },
        { lable: "jieshao", content: "对应经络：小肠经" },
        {
          lable: "jieshao",
          content:
            "温馨提示：午餐如果吃的过饱会出现消化吸收障碍，从而导致腹胀、腹泻等。建议午餐八分饱...",
        },
        { lable: "duanluo", content: "" },
        [
          { lable: "title", content: "未时小肠经当令" },
          {
            lable: "duanluo",
            content: "未时是小肠经当令，是保养小肠的最佳时段。 ",
          },
          {
            lable: "duanluo",
            content:
              "小肠是饮食消化和吸收的主要场所。小肠的生理功能包括受盛化物和泌别清浊。",
          },
          { lable: "duanluo", content: "■ 受盛化物" },
          {
            lable: "duanluo",
            content:
              "“受”有接受之意，而小肠接受的是经过胃初步消化的食物，它是初步加工过的一种精细化了的食物。",
          },
          {
            lable: "duanluo",
            content:
              "如果小肠受盛功能失调，传化停止，则气机失于通调，滞而为痛，这时腹部疼痛等病症就会出现；如果小肠的化物功能失常，就会出现消化、吸收障碍，其典型表现为腹胀、腹泻、便溏等。",
          },
          { lable: "duanluo", content: "■ 泌别清浊" },
          {
            lable: "duanluo",
            content:
              "“泌”有分泌之意；“别”，即分别、分离；“清”，指水谷精微，即具有营养作用的物质；“浊”，即代谢产物。小肠接受了胃传递过来的初步加工过的食物，接下来就是将食物进一步消化成为人体可以吸收和利用的物质，并将其中的精华物质吸收，提供给人体使用，最后再将剩下的糟粕物质向下传递给大肠，由大肠排出体外。",
          },
        ],
        [
          { lable: "title", content: "12点半吃午饭最利于小肠吸收" },
          {
            lable: "duanluo",
            content:
              "未时，也就是下午1点至3点的时间段，小肠经最活跃，而午餐一定要在午时内吃完，这样到了未时小肠值班时可以最大化地吸收食物的营养成分。",
          },
          {
            lable: "duanluo",
            content:
              "建议午餐最好在12：30左右吃，不要赶在12：00，因为此时人的气血最旺，身体处于最亢奋状态。这样才能在小肠精力最旺盛的时候把营养物质都吸收进入人体。否则，就会造成浪费。",
          },
          {
            lable: "duanluo",
            content:
              "午饭一定要吃好，饮食的营养价值要高、要精、要丰富。午餐以简单、重质不重量为原则，避免吃得过饱，否则整个下午都会觉得没有精神。",
          },
        ],
        [
          { lable: "title", content: "小肠经穴位是最好的“按摩师”" },
          {
            lable: "duanluo",
            content: "在门诊经常听到求治的患者自诉有“颈椎病”。",
          },
          {
            lable: "duanluo",
            content:
              "现代医学认为，颈椎病是由于颈椎间盘退行性变、颈椎骨质增生所引起的一系列临床症状。还有人将以颈椎退行性病变为基础（椎间盘突出、骨质增生等）及由此引起的颈肩部酸麻、胀痛症状称作“颈肩综合征”。",
          },
        ],
      ], //当前时辰数据
    };
  },
  created() {},
  mounted() {
    //计时器开启
    this.interval = setInterval(() => {
      let MyDate = new Date();
      this.time =
        MyDate.getFullYear() +
        "年" +
        (MyDate.getMonth() + 1) +
        "月" +
        MyDate.getDate() +
        "日 " +
        MyDate.getHours() +
        ":" +
        MyDate.getMinutes() +
        ":" +
        MyDate.getSeconds();
      this.twelveClock = this.getShiChen(
        new Date().getHours(),
        new Date().getMinutes(),
        new Date().getSeconds()
      );
    }, 300);
    setTimeout(()=>{
      clearInterval(this.interval);
    },5000)
    setTimeout(() => {
      // console.log(this.twelveClock.substring(0, 2));
      //获取时辰数据
      axios
        .get(
          `http://81.68.255.101:8097/api/Taboo/getshijian/ask=${this.twelveClock.substring(
            0,
            2
          )}/`
        )
        .then((respons) => {
          this.timeDate = this.dataProccess(respons.data);
        });
    }, 500);
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  methods: {
    getShiChen(h, m, s) {
      let shichenStr =
        this.tzArr[parseInt(((h + 1) % 24) / 2)] +
        "时（" +
        this.sdArr[parseInt(h / 2)] +
        "）";
      // 判断时刻
      if (h % 2 === 0) {
        shichenStr += this.skArr[parseInt(m / 15)];
      } else if (h % 2 === 1) {
        shichenStr += this.skArr[parseInt(m / 15) + 4];
      }
      return shichenStr + "刻";
    },
    dataProccess(data) {
      let newData = [];
      for (let i = 0; i < data.length; i++) {
        if (data[i].lable === "title") {
          newData.push([data[i]]);
          i++;
          for (; i < data.length && data[i].lable !== "title"; i++) {
            newData[newData.length - 1].push(data[i]);
          }
          i--;
        } else {
          newData.push(data[i]);
        }
      }
      console.log(newData);
      return newData;
    },
    resetHour(hourName) {
      axios
        .get(`http://81.68.255.101:8097/api/Taboo/getshijian/ask=${hourName}/`)
        .then((respons) => {
          this.timeDate = this.dataProccess(respons.data);
        });
    },
  },
  components: {
    TwelveClock,
    Folding,
    KeepHealthNav,
    Reload,
  },
};
</script>

<style scoped>
#keepHealthHour .title {
  line-height: 1.2;
  color: #273c5f;
  font-size: 30px;
}
</style>
